<script setup>
  // 1.声明元素
  import { ref } from "vue"
  const count = ref(0)

  const increse = () => {
    // 注意事项：当在双标签外使用ref响应式数据时，需要通过.value进行获取
    count.value++
  }

  const add = (n) => {
    count.value += n
  }

  const restart = () => {
    count.value = 0
  }

</script>

<template>
  <div>
    <h1>{{ count }}</h1>
    <!-- 1.使用内联函数，当处理函数仅有一行代码时 -->
    <button v-on:click="count++">+1</button>
    <!-- 2.使用无参函数 -->
    <button v-on:click="increse">+1</button>
    <!-- 3.使用有参函数 -->
    <button v-on:click="add(3)">+3</button>
    <button v-on:click="add(5)">+5</button>
    
    <!-- 4.使用事件绑定指令缩写 -->
    <button @click="restart">重置为零</button>
  </div>
</template>

<style scoped>

</style>